<template>
  <div>
    <el-popover
      v-model="visible"
      placement="bottom"
      width="200"
      trigger="click"
      popper-class="filterColumns"
    >
      <div class="filter_box">
        <div class="filter_head">
          <el-checkbox
            v-model="isAll"
            @change="toSelectAll"
            :label="$t('equipmentManagement.shebei110')"
          />
        </div>
        <div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item, index) in list" :key="index" :label="item.label" />
          </el-checkbox-group>
        </div>
        <div class="filter_foot">
          <el-button size="small" @click="cancel">{{ $t('add.add31') }}</el-button>
          <el-button size="small" type="primary" @click="sure">{{ $t('add.add30') }}</el-button>
        </div>
      </div>

      <el-button class="filter_btn" size="small" slot="reference" icon="el-icon-s-tools" />
    </el-popover>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
  name: 'filterColumns',
  components: {},
  data() {
    return {
      isAll: true,
      visible: false,
      checkList: [],
    };
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  watch: {
    // 当message变化时，这个函数就会被调用
    checkList() {
      if (this.checkList.length === this.list.length) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
    },
  },
  mounted() {
    this.initCheck();
  },

  methods: {
    initCheck() {
      if (this.isAll) {
        this.checkList = this.list.map((m) => m['label']);
      }
    },
    toSelectAll() {
      if (this.isAll) {
        this.checkList = this.list.map((m) => m['label']);
      } else {
        this.checkList = [];
      }
    },
    cancel() {
      this.visible = false;
    },
    sure() {
      this.visible = false;
      this.$emit('getTableHead', this.checkList);
    },
  },
};
</script>

<style lang="scss" scoped>
.filter_box {
  .el-checkbox {
    line-height: 30px;
  }
  .filter_head {
    border-bottom: 1px solid #e0e4ea;
    margin-bottom: 5px;
  }
  .filter_foot {
    padding-top: 10px;
    margin-top: 5px;
    text-align: right;
    border-top: 1px solid #e0e4ea;
  }
}
.filter_btn {
  margin-bottom: 10px;
}
</style>
